<!-- 
在 Vue 3 中，使用组合 API 的  `setup`  函数是组件的入口点，而  `setup`  函数的生命周期钩子则是与组件的生命周期相关的特定方法。
  1.  `setup`  函数
  `setup`  函数在组件实例被创建之前调用，是组合 API 的核心部分。它用于初始化组件的状态、计算属性、方法等。

  2. 生命周期钩子
  在  `setup`  函数中，可以使用以下生命周期钩子：
   1.  `onBeforeMount` 
  - 调用时机：在组件挂载之前。
  - 用途：适合在组件挂载之前进行一些准备工作。

   2.  `onMounted` 
  - 调用时机：在组件挂载到 DOM 之后。
  - 用途：可以在此阶段进行与 DOM 相关的操作，如获取 DOM 元素、初始化第三方库等。

   3.  `onBeforeUpdate` 
  - 调用时机：在组件更新之前。
  - 用途：可以在数据变化导致视图更新之前进行一些操作。

   4.  `onUpdated` 
  - 调用时机：在组件更新后，DOM 重新渲染完成。
  - 用途：可以在视图更新后进行操作，例如获取更新后的 DOM 状态。

   5.  `onBeforeUnmount` 
  - 调用时机：在组件实例被销毁之前。
  - 用途：可以进行清理工作，例如移除事件监听器、清理定时器等。

   6.  `onUnmounted` 
  - 调用时机：在组件实例被销毁后。
  - 用途：可以执行一些清理操作，确保没有内存泄漏。

  3. 示例
  以下是使用  `setup`  函数和生命周期钩子的示例：
  vue
  <template>
    <div>
      <h1>{{ message }}</h1>
      <button @click="updateMessage">更新消息</button>
    </div>
  </template>

  <script>
  import { ref, onMounted, onBeforeUnmount } from 'vue';

  export default {
    setup() {
      const message = ref('Hello, Vue 3!');

      const updateMessage = () => {
        message.value = '消息已更新!';
      };

      onMounted(() => {
        console.log('组件已挂载');
      });

      onBeforeUnmount(() => {
        console.log('组件即将被销毁');
      });

      return {
        message,
        updateMessage
      };
    }
  };
  </script>
  4. 总结
  在 Vue 3 的组合 API 中， `setup`  函数是组件的核心，结合生命周期钩子可以有效地管理组件的状态和行为。通过使用  `onMounted` 、 `onBeforeUnmount`  等钩子，开发者可以在组件的不同阶段执行特定的逻辑，增强组件的功能和性能。理解这些生命周期钩子的使用时机和用途，有助于更好地管理 Vue 组件的生命周期。 
-->
<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';

export default {
  beforeCreate() {
  },
  // created() {
  // },
  // beforeMount() {
  // },
  // mounted() {
  // },
  // beforeUpdate() {
  // },
  // updated() {
  // }
  setup() {
    const message = ref('Hello, Vue 3!');

    const updateMessage = () => {
      message.value = '消息已更新!';
    };

    onMounted(() => {
      console.log('组件已挂载');
    });

    onBeforeUnmount(() => {
      console.log('组件即将被销毁');
    });

    return {
      message,
      updateMessage
    };
  }
};
</script>